<!-- 这个组件是一个首页面的展示效果，是一个单独的页面 -->

<template>
    <div class="first-container">
        <!-- 白云 -->
        <!-- 手机端的页面显示 -->
        <div class="h-screen w-screen 
            bg-gradient-to-t from-amber-300 to-blue-500
        ">
            <div class="clouds w-full flex flex-row pt-20">
                <img class="cloud1 w-32 hover:bg-blue-300 rounded-2xl" src="../public/cloud/白云1.png" />
                <img class="cloud2 w-32 hover:bg-blue-300 rounded-2xl" src="../public/cloud/白云2.png" />
                <img class="cloud3 w-32 hover:bg-blue-300 rounded-2xl" src="../public/cloud/白云3.png" />
                <img class="cloud4 w-32 hover:bg-blue-300 rounded-2xl" src="../public/cloud/白云4.png" />
            </div>

            <div class="flex flex-col justify-center pt-10 italic lg:pt-10 lg:items-center ">
                <div class="welcome-tip text-6xl font-bold pl-6 ">Welcome to</div>
                <div class="blog-name text-4xl p-10 pl-18">
                    the blog
                    <br>
                    <span class="txt1 font-bold flex justify-center items-center not-italic pt-6 pb-3">of</span>
                    <br>
                    <img class="rounded-2xl hover:bg-blue-100" src="../public//signature.png">

                </div>
            </div>

            <!-- 开始按钮 -->
            <div class="pl-30 italic lg:mr-40 lg:flex lg:justify-center lg:items-center">
                <div @mouseover="start_btn_focus" @mouseleave="reset_btn_focus" @click="goHome" class="start-btn bg-blue-500 text-3xl rounded-2xl 
                p-6 w-56
                     hover:bg-blue-800
                     flex
                     justify-between
                     ml-24
                     ">
                    <span class="">let's</span>
                    <span class=""> start</span>
                </div>
            </div>
            <!-- 五角星的图片 -->
            <div class="flex flex-row">
                <img src="../public/wujiao/wjx1.png" alt="五角星1" class="star1 w-12 h-12 opacity-0" />
                <img src="../public/wujiao/wjx2.png" alt="五角星2" class="star2 w-16 h-16 opacity-0" />
                <img src="../public/wujiao/wjx3.png" alt="五角星3" class="star3 w-20 h-20 opacity-0" />
            </div>
            <img src="../public/bk1.png" class="fixed bottom-0 left-0 -ml-56  lg:w-96 lg:ml-0" />
        </div>

    </div>

</template>

<script setup>
import gsap from 'gsap';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useLoadingStore } from '../../ts/pinia/index';
const loadingStore = useLoadingStore()

let router = useRouter()
function goHome() {
    router.push('/main/home')
}

onMounted(() => {
    moveClouds()
    startAnime()
    loadingStore.hide()
})

function start_btn_focus() {
    console.log("聚焦函数");

    gsap.to(".start-btn", {
        width: "14rem", // 按钮变长
        // paddingLeft: "1rem", // 左侧内边距增加
        // paddingRight: "1rem", // 右侧内边距增加
        duration: 1, // 动画持续时间
        ease: "power1.out", // 缓动效果
    });
    move_star()
}

let btn_anime = gsap.timeline({ paused: true });
function reset_btn_focus() {
    console.log("离开函数");
    btn_anime.kill()
    gsap.to(".start-btn", {
        width: "10rem", // 按钮变长
        paddingLeft: "1rem", // 左侧内边距增加
        paddingRight: "1rem", // 右侧内边距增加
        duration: 1, // 动画持续时间
        ease: "power1.out", // 缓动效果
    });
}

// 移动到按钮上时的星星移动的动画
function move_star() {
    btn_anime.clear()
    btn_anime.fromTo('.star1', { x: window.innerWidth < 768 ? 210 : 800, y: -150, opacity: 0 }, { opacity: 1, x: window.innerWidth < 768 ? 210 : 800, y: -600, duration: 1, delay: 0 }).to('.star1', { opacity: 0, x: -window.innerWidth, y: -700, duration: 1 },);
    btn_anime.fromTo('.star2', { x: window.innerWidth < 768 ? 150 : 740, y: -160, opacity: 0 }, { opacity: 1, x: window.innerWidth < 768 ? 150 : 740, y: -600, duration: 1, delay: 0.2 }).to('.star2', { opacity: 0, x: -window.innerWidth, y: -700, duration: 1 }, '>');
    btn_anime.fromTo('.star3', { x: window.innerWidth < 768 ? 90 : 680, y: -200, opacity: 0 }, { opacity: 1, x: window.innerWidth < 768 ? 90 : 680, y: -600, duration: 1, delay: 0.4 }).to('.star3', { opacity: 0, x: -window.innerWidth, y: -700, duration: 1 }, '>');
    btn_anime.play();
}


function moveClouds() {
    let anime2 = gsap.timeline({ paused: true });
    anime2.fromTo('.cloud1', { x: window.innerWidth, y: 0 }, { x: -window.innerWidth, y: 0, duration: 10, repeat: -1 }, '1');
    anime2.fromTo('.cloud2', { x: window.innerWidth, y: 0 }, { x: -window.innerWidth, y: 0, duration: 10, repeat: -1 }, '3');
    anime2.fromTo('.cloud3', { x: window.innerWidth, y: 0 }, { x: -window.innerWidth, y: 0, duration: 10, repeat: -1 }, '6');
    anime2.fromTo('.cloud4', { x: window.innerWidth, y: 0 }, { x: -window.innerWidth, y: 0, duration: 10, repeat: -1 }, '9');
    anime2.play();
}

function startAnime() {
    let anime1 = gsap.timeline({ paused: true });
    anime1.fromTo('.welcome-tip', { x: -window.innerWidth, y: 0 }, { x: 0, y: 0, duration: 1 });
    anime1.fromTo('.blog-name', { x: window.innerWidth, y: 0 }, { x: 0, y: 0, duration: 2 }, '<');
    anime1.to('.txt1', { x: 0, y: 0, duration: 2, rotation: 360, repeat: -1, ease: "liner" }, '<');
    anime1.play();
}


</script>

<style scoped>
.txt1 {
    display: inline-block;
    /* 确保可以应用 transform */
}

.first-container {
    overflow: hidden;
}
</style>